<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span><el-button size="medium" @click="addDialogVisible = true" class="fill-btn">新建</el-button>
          <el-button size="medium" class="plain-btn">批量删除</el-button></span>
      </div>
      <div>
        <el-table
          ref="multipleTable"
          :data="picResult"
          tooltip-effect="dark"
          style="width: 100%"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          >
          </el-table-column>
          <el-table-column
            label="计划名称"
            prop="plan"
          >
          </el-table-column>
          <el-table-column
            label="周期"
            prop="days"
            width="120"
          >
          </el-table-column>
          <el-table-column
            label="抓拍时间"
            prop="times"
            width="180"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            width="220"
          >
            <template>
              <span class="action">关闭 </span>|
              <span class="action">编辑 </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!--    添加弹窗-->
    <el-dialog
      title="新增"
      :visible.sync="addDialogVisible"
      width="60%"
    >
      <div>
        <el-form :model="addForm" :rules="addRules" ref="addFormRef" label-width="100px" class="add-form">
          <el-form-item label="计划名称" prop="plan">
            <el-col :span="8">
              <el-input v-model="addForm.plan"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="抓拍周期">
            <el-checkbox :indeterminate="isIndeterminate" v-model="allDay" @change="handleCheckAllChange">每天
            </el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="addForm.days" @change="handleCheckedDaysChange">
              <el-checkbox v-for="(day, i) in dayOptions" :label="day" :key="i"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="抓拍时间">
            <el-time-picker
              v-for="(item,i) in timesList"
              v-model="timesList[i]"
              placeholder="任意时间点"
              :key="i"
            >
            </el-time-picker>
            <el-button type="primary" icon="el-icon-plus" size="small" circle @click="addNewTime"></el-button>
          </el-form-item>
          <el-form-item label="选择门店">
            <!--        使用树形穿梭框组件-->
            <tree-transfer
              :title="['待选', '已选']"
              :from_data="deviceList"
              :to_data="addForm.devices"
              :defaultProps="{label:'label'}"
              @addBtn="addDevice"
              @removeBtn="removeDevice"
              :mode="'transfer'"
              height="400px"
              filter
              openAll
            >
            </tree-transfer>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import treeTransfer from 'el-tree-transfer'

export default {
  name: '',
  components: { treeTransfer },
  data() {
    // const name
    return {
      picResult: [{
        id: 1,
        plan: '测试巡检',
        days: '每天',
        times: '14:00|14:05|15:00'
      }, {
        id: 2,
        plan: '图片巡检',
        days: '每天',
        times: '9:00'
      }],
      addDialogVisible: false,
      addForm: {
        plan: '',
        days: [],
        times: '',
        devices: []
      },
      addRules: {},
      allDay: false,
      dayOptions: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      isIndeterminate: false,
      timesList: [''],
      // 设备列表
      deviceList: [
        {
          id: '1',
          pid: 0,
          label: '华为',
          children: [
            {
              id: '1-1',
              pid: '1',
              label: '牛利远程守护',
              children: []
            }
          ]
        },
        {
          id: '2',
          pid: 0,
          label: '明牌珠宝',
          children: [
            {
              id: '2-1',
              pid: '2',
              label: '一级戒备',
              children: []
            }
          ]
        },
        {
          id: '3',
          pid: 0,
          label: '牛利',
          children: [
            {
              id: '3-1',
              pid: '3',
              label: '牛利杭州大厅',
              children: []
            },
            {
              id: '3-2',
              pid: '3',
              label: '牛利杭州大厅左侧',
              children: []
            },
            {
              id: '3-3',
              pid: '3',
              label: '牛利北海开放办公区1',
              children: []
            },
            {
              id: '3-4',
              pid: '3',
              label: '牛利北海入门口',
              children: []
            }
          ]
        }]
    }
  },
  created() {
  },
  mounted() {
  },
  computed: {},
  watch: {},
  methods: {
    handleSelectionChange(val) {
      // console.log(val)
    },
    // 抓拍周期全选
    handleCheckAllChange(val) {
      this.addForm.checkedDay = val ? this.dayOptions : []
      this.isIndeterminate = false
    },
    handleCheckedDaysChange(value) {
      const checkedCount = value.length
      this.allDay = checkedCount === this.dayOptions.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.dayOptions.length
    },
    // 增加抓拍时间
    addNewTime() {
      const t = ''
      this.timesList.push(t)
      console.log(this.timesList)
    },
    addDevice(fromData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      console.log('fromData:', fromData)
      console.log('toData:', toData)
      console.log('obj:', obj)
    },
    // 监听穿梭框组件移除
    removeDevice(fromData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      console.log('fromData:', fromData)
      console.log('toData:', toData)
      console.log('obj:', obj)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
.el-table{
  .action{
    font-size: 13px;
        color: var(--app_primary);
        cursor: pointer;

        &:hover {
          text-decoration: underline;
        }
  }
}
.el-date-editor {
  margin-right: 10px;
  margin-bottom: 5px;
}
</style>
